import React, { useEffect, useState, useRef } from 'react';
import { Space, Table, Tag, Button, Descriptions } from 'antd';
import { useParams } from 'react-router-dom';
import {
  SearchOutlined,
  StarOutlined,
  FormOutlined,
  DownloadOutlined,
  ShareAltOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { yewutable_detail } from '../../api/yewutable';
import './Detail.scss'
interface Props { }
function Detail(props: Props) {

  var [name, setName] = useState('')
  var [sector, setSector] = useState('')
  var [address, setAddress] = useState('')
  var [id, setId] = useState('')


  // 发请求
  var fa = async () => {
    console.log(params)
    var res = await yewutable_detail({ yewuid: params.id })
    console.log(res.data)
    setAddress(res.data.yewuaddress)
    setName(res.data.yewuname)
    setSector(res.data.yewusecort)
    setId(res.data.yewuid)

  }

  var params = useParams()
  console.log(params.id)
  // 生命周期
  useEffect(() => {
    // 发请求拿到详情数据
    fa()
  }, [])
  return (
    <div className='detail'>
      <div className='center'>
        <div className='header'>
          <h2>{name}</h2>
          <div className='wu'>
            <Button type='primary'>在线办理&gt;&gt;</Button>
            <Button icon={<DownloadOutlined />}>下载</Button>

            <Button icon={<StarOutlined />} >收藏</Button>
            <Button icon={<FormOutlined />} >评价</Button>
            <Button icon={<ShareAltOutlined />} >分享</Button>

          </div>
        </div>
        <h3><span>基本信息</span></h3>
        <Descriptions bordered>
          <Descriptions.Item label="实施事项名称" span={3} >{name}</Descriptions.Item>
          <Descriptions.Item label="办理方式" span={3} >身份证办理</Descriptions.Item>
          <Descriptions.Item label="事项编码" span={3}  >{id}</Descriptions.Item>
          <Descriptions.Item label="主管部门" span={1.5}  >{sector}</Descriptions.Item>
          <Descriptions.Item label="事项类型" span={1.5} >行政许可</Descriptions.Item>
          <Descriptions.Item label="通办范围" span={1.5} >无</Descriptions.Item>
          <Descriptions.Item label="行政区" span={1.5} >{address}</Descriptions.Item>
          <Descriptions.Item label="办件类型" span={1.5} >即办件</Descriptions.Item>
          <Descriptions.Item label="是否实行告知承诺制" span={1.5}>实行告知承诺制</Descriptions.Item>
          <Descriptions.Item label="面向用户对象" span={1.5}>面向个人</Descriptions.Item>
          <Descriptions.Item label="面向个人主要分类" span={1.5}>规划建设</Descriptions.Item>
          <Descriptions.Item label="面向法人主题分类" span={1.5}>设立变更</Descriptions.Item>
          <Descriptions.Item label="是否即办件" span={1.5}>否</Descriptions.Item>
          <Descriptions.Item label="承诺时间" span={1.5}>即办件</Descriptions.Item>
          <Descriptions.Item label="法定时限" span={1.5}>即办</Descriptions.Item>
          <Descriptions.Item label="温馨提示">
            1.审批结果送达方式包括直接送达和邮寄送达，申请单位（人)可根据情况自行选择送达方式。省、市重点项目可免费邮寄送达，其他项目如需邮客送达,费用则由申请单位(人) ...
          </Descriptions.Item>
        </Descriptions>


        <h3><span>申请条件</span></h3>
        <p style={{ paddingBottom: 20 }}>具有统筹区户籍，年满16周岁（全日制学校在校学生除外），非国家机关、事业单位、社会团体工作人员，未参加职工基本养老保险的城乡居民。</p>
      </div>
    </div>
  );
}

export default Detail;